<template>
<div>
    <div class="control-section">
      <div id="chip-default-wrapper">
          <div class="chips-headers">Chips</div>

          <div class="sample-padding">
            <!-- initialize default chip component -->
              <ejs-chiplist id="chip-default">
                  <e-chips>
                      <e-chip text="Apple" cssClass="e-primary"></e-chip>
                      <e-chip text="Microsoft" cssClass="e-info"></e-chip>
                      <e-chip text="Google" cssClass="e-success"></e-chip>
                      <e-chip text="Tesla" cssClass="e-warning"></e-chip>
                      <e-chip text="Intel" cssClass="e-danger"></e-chip>
                  </e-chips>
              </ejs-chiplist>
          </div>

          <div class="separator"></div>

          <div class="chips-headers">Input Chips</div>

          <div class="sample-padding">
            <!-- initialize avatar chip component -->
              <ejs-chiplist id="chip-avatar" enableDelete="true">
                  <e-chips>
                      <e-chip text="Anne" leadingIconCss="anne"></e-chip>
                      <e-chip text="Janet" leadingIconCss="janet"></e-chip>
                      <e-chip text="Laura" leadingIconCss="laura"></e-chip>
                      <e-chip text="Margaret" leadingIconCss="margaret"></e-chip>
                  </e-chips>
              </ejs-chiplist>
          </div>

          <div class="separator"></div>

          <div class="chips-headers">Filter Chips</div>

          <div class="sample-padding">
            <!-- initialize filter chip component -->
              <ejs-chiplist id="chip-filter" selection="Multiple" :selectedChips='filterSelected'>
                  <e-chips>
                      <e-chip text="Extra small"></e-chip>
                      <e-chip text="Small"></e-chip>
                      <e-chip text="Medium"></e-chip>
                      <e-chip text="Large"></e-chip>
                      <e-chip text="Extra large"></e-chip>
                  </e-chips>
              </ejs-chiplist>
          </div>

          <div class="separator"></div>

          <div class="chips-headers">Choice Chips</div>

          <div class="sample-padding">
            <!-- initialize choice chip component -->
              <ejs-chiplist id="chip-choice" selection="Single" cssClass="e-outline" :selectedChips='choiceSelected'>
                  <e-chips>
                      <e-chip text="Send a text" leadingIconCss="text"></e-chip>
                      <e-chip text="Set a reminder" leadingIconCss="alarm"></e-chip>
                      <e-chip text="Read my emails" leadingIconCss="mail"></e-chip>
                      <e-chip text="Play a game" leadingIconCss="game"></e-chip>
                  </e-chips>
              </ejs-chiplist>
          </div>
      </div>
    </div>
    <div id="action-description">
       <p>This sample demonstrates the default functionalities of Chips with different types and predefined styles. Click
        and interact the chip, to select single or multiple options from chips collection.</p>
    </div>
    <div id="description">
         <p>
            Chip is a small block of essential information that triggers an event on click action. It contains the text, an
            image, or both, mostly used in contacts, mails or filter tags.
        </p>
        <p>In this sample, default, input, filter and choice chips are demonstrated with their default functionalities.</p>
        <ol>
            <li><b>Input chip</b>– Basic chip with delete icon, enables to remove chips from the chip list collection.</li>
            <li><b>Choice chip</b> – Used to choose a choice from available options.</li>
            <li><b>Filter chip</b> – Used to select multiple choices from available options.</li>
        </ol>
    </div>
</div>
</template>

<script>
import Vue from "vue";
import { ChipListPlugin } from "@syncfusion/ej2-vue-buttons";

Vue.use(ChipListPlugin);

export default Vue.extend({
  data: function() {
    return {
      choiceSelected: [1],
      filterSelected: [1, 3]
    };
  }
});
</script>

<style>
#chip-default-wrapper .sample-padding {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chips-headers {
  font-size: 12px;
  text-align: center;
  padding-top: 10px;
}

/* chips samples icons */

#chip-choice .e-chip .e-chip-icon {
  font-family: "e-chips-icons";
}

#chip-choice .text::before {
  content: "\e701";
}

#chip-choice .mail::before {
  content: "\e700";
}

#chip-choice .alarm::before {
  content: "\e704";
}

#chip-choice .game::before {
  content: "\e703";
}

@font-face {
  font-family: "e-chips-icons";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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)
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

#chip-default-wrapper .andrew {
  background-image: url("./images/andrew.png");
}

#chip-default-wrapper .anne {
  background-image: url("./images/anne.png");
}

#chip-default-wrapper .janet {
  background-image: url("./images/janet.png");
}

#chip-default-wrapper .laura {
  background-image: url("./images/laura.png");
}

#chip-default-wrapper .margaret {
  background-image: url("./images/margaret.png");
}

#chip-default-wrapper .michael {
  background-image: url("./images/michael.png");
}
</style>
